<template>
	<div class="role">
		<div class="title">
			<div class="item">关键字：</div>
			<div class="item">
				<el-input v-model="keyword" clearable placeholder="请输入关键字" @change="search"></el-input>
			</div>
			<div class="item">
				<span>状态：</span>
				<el-select v-model="status" clearable @change="search" placeholder="请选择状态">
					<el-option label="正常" value="1"></el-option>
					<el-option label="禁用" value="0"></el-option>
				</el-select>
			</div>
			<div class="item">
				<el-button type="primary" @click="search">查询</el-button>
			</div>
		</div>
		<div class="tab">
			<el-table
				v-if="initTableList"
				class="marT"
				:data="initTableList.slice((current-1)*size, current*size)"
				:border="true"
				:header-cell-style="{background:'#eef1f6'}">
				<el-table-column
					align="center"
					type="index"
					label="序号"
					width="50">
				</el-table-column>
				<el-table-column align="center" property="name" label="姓名"></el-table-column>
				<el-table-column align="center" property="role_show" label="角色">
					<template slot-scope="scope">
						<span>{{getRole(scope.row.role_show)}}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" property="account" label="账号"></el-table-column>
				<el-table-column align="center" property="phone" label="手机号"></el-table-column>
				<el-table-column align="center" property="email" label="email"></el-table-column>
				<el-table-column align="center" property="status_show" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status == 0" type="primary" effect="plain">禁用</el-tag>
						<el-tag v-if="scope.row.status == 1" type="success" effect="plain">正常</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<span><a  @click="toDetails(scope.row.id)">查看</a></span>
						<span><a > | </a></span>
						<span><a @click="toBianji(scope.row.id)" :disabled="!power.includes('user_update')">编辑</a></span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="tableSize"
				@size-change="tableSizeChange"
				@current-change="tableCurrentChange"
				:current-page="tableCurrent"
				style="text-align: center;height:100px;"
				:total="tableTotal">
			</el-pagination>
		</div>
		<seeForm ref="seeForm"></seeForm>
		<editForm ref="editForm"></editForm>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
import seeForm from "./model/seeForm";
import editForm from "./model/editForm";
import {user} from '@/api/user'
export default {
	name: 'role',
	components:{
		seeForm,
		editForm
	},
	data(){
		return {
			status:'',
			tableSize: 10,
			tableCurrent: 1,
			keyword: '',
			value: '',
			size: 10,
			current: 1,
			initTableList: [],
			tableTotal:1,
			power:[]
		}
	},
	mounted() {

	},
	created() {
		this.initTable()
	},
	methods:{
		getRole(data){
			let name = ''
			data.filter((item,index) => {
				if(index < data.length-1){
					name += item + '，'
				}else {
					name += item
				}
			})
			return name
		},
		tableSizeChange(val) {
			this.tableSize = val
		},
		tableCurrentChange(val) {
			this.tableCurrent = val
			var params ={
				pageNo:this.tableCurrent,
				pageSize:this.tableSize
			}
			user(params).then(res => {
				if(res.code == 200){
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalCount
				}
			})
		},
		search(){
			user({
				keywords:this.keyword,
				status:this.status
			}).then(res => {
				if(res.code == 200){
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalPage
				}
			})
		},
		initTable(){
			var params ={
				pageNo:1,
				pageSize:10
			}
			user(params).then(res => {
				if(res.code == 200){
					this.power = sessionStorage.getItem('power').split(',')
					this.initTableList = res.data.data
					this.tableTotal = res.data.totalCount
				}
			})
		},
		toDetails(data){
			this.$refs.seeForm.dialogFormVisible = true
			this.$refs.seeForm.initData(data)
		},
		toBianji(data){
			this.$refs.editForm.dialogFormVisible = true
			this.$refs.editForm.initData(data)
		}
	}
}
</script>

<style lang="scss" scoped>
.role{
	padding: 0 10px;
	.title{
		width: 100%;
		padding: 20px;
		background-color: #fff;
		margin: 5px 0;
		display: flex;
		.item:first-child{
			line-height: 36px;
		}
		.item:nth-child(3){
			margin: 0 5px;
		}
	}
	.tab{
		width: 100%;
		padding: 20px;
		background-color: #fff;
	}
	.box{
		.details{
			margin-left: 5px;
		}
	}
}


</style>
